<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>智慧大棚系统 - 投入类别管理</title>
		<script src="https://cdn.tailwindcss.com"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue@3.3.11/dist/vue.global.prod.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js"></script>

		<!-- Tailwind配置 -->
		<script>
			tailwind.config = {
				theme: {
					extend: {
						colors: {
							primary: '#2E7D32', // 主色调：绿色，代表农业、生长
							secondary: '#1976D2', // 辅助色：蓝色，代表科技、数据
							accent: '#F59E0B', // 强调色：橙色，代表警告、提醒
							neutral: {
								100: '#F9FAFB',
								200: '#F3F4F6',
								300: '#E5E7EB',
								400: '#D1D5DB',
								500: '#9CA3AF',
								600: '#6B7280',
								700: '#4B5563',
								800: '#1F2937',
								900: '#111827'
							}
						},
						fontFamily: {
							inter: ['Inter', 'sans-serif'],
						},
						boxShadow: {
							'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
							'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
						}
					},
				}
			}
		</script>

		<style type="text/tailwindcss">
			@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-grid {
                background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                                  linear-gradient(to right, #e5e7eb 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .errmsg {
                @apply text-red-500 text-xs ml-2;
            }
            .management-title {
                @apply text-xl font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .management-title-dialog {
                @apply text-lg font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .search-container {
                @apply flex flex-wrap gap-2 mb-4;
            }
            .search-input {
                @apply px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .search-button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .leftmargin {
                @apply ml-2;
            }
            .button-spacing {
                @apply mb-4;
            }
            .button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .editButton {
                @apply bg-blue-600 hover:bg-blue-700;
            }
            .deleteButton {
                @apply bg-red-600 hover:bg-red-700;
            }
            table {
                @apply w-full border-collapse;
            }
            th {
                @apply px-4 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-600 uppercase tracking-wider border border-neutral-200;
            }
            td {
                @apply px-4 py-2 border border-neutral-200;
            }
            tr:nth-child(even) {
                @apply bg-neutral-50;
            }
            tr:hover {
                @apply bg-neutral-100 transition-colors duration-150;
            }
            .pagination {
                @apply flex mt-4 space-x-2;
            }
            .pagination button {
                @apply px-3 py-1 border border-neutral-300 rounded hover:bg-neutral-100 transition-colors duration-150;
            }
            dialog {
                @apply fixed inset-0 m-auto w-1/2 max-w-md p-6 rounded-lg shadow-xl z-50 bg-white border-none;
            }
            dialog::backdrop {
                @apply bg-black/50 backdrop-blur-sm;
            }
            dialog form {
                @apply space-y-4;
            }
            dialog label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            dialog input, dialog select, dialog textarea {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            dialog textarea {
                @apply h-24 resize-none;
            }
            .sidebar {
                @apply w-64 bg-white border-r border-neutral-200 h-screen fixed left-0 top-0 pt-20 overflow-y-auto;
            }
            .sidebar ul {
                @apply space-y-1 px-2;
            }
            .sidebar li {
                @apply rounded-md;
            }
            .sidebar a {
                @apply block px-4 py-2 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-md transition-colors duration-200;
            }
            .sidebar a.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .header {
                @apply bg-white shadow-md fixed w-full z-50 h-20 flex items-center px-6;
            }
            .header h1 {
                @apply text-xl font-bold text-neutral-800 ml-2;
            }
            .content {
                @apply ml-64 pt-20 px-6 pb-10;
            }
            .highlight {
                @apply bg-yellow-100;
            }
        }
    </style>
	</head>

	<body>
		<div id="app">
			<div class="header">
				<!-- 加入 logo -->
				<div class="bg-primary text-white p-2 rounded-lg">
					<i class="fa-solid fa-farm text-xl"></i>
				</div>
				<h1>智慧大棚管理系统</h1>
			</div>

			<div class="container">
				<!-- 左侧导航栏 -->
				<div class="sidebar">
					<ul>
						<li><a href="/greenhouse/GreenHouseType/list.html" class="sidebar-item">大棚种类管理</a></li>
						<li><a href="/greenhouse/GreenHouseLocation/list.html" class="sidebar-item">大棚位置管理</a></li>
						<li><a href="/greenhouse/GreenHouse/list.html" class="sidebar-item">大棚管理</a></li>
						<li><a href="/greenhouse/Crops/list.html" class="sidebar-item">农产品管理</a></li>
						<li><a href="/greenhouse/PlanType/list.html" class="sidebar-item">计划分类管理</a></li>
						<li><a href="/greenhouse/Plan/list.html" class="sidebar-item">计划管理</a></li>
						<li><a href="/greenhouse/InputType/list.html" class="sidebar-item">投入类别管理</a></li>
						<li><a href="/greenhouse/Input/list.html" class="sidebar-item">投入管理</a></li>
						<li><a href="/greenhouse/Order/list.html" class="sidebar-item">订单管理</a></li>
						<li><a href="/greenhouse/Employee/list.html" class="sidebar-item">员工管理</a></li>
					</ul>
				</div>

				<!-- 内容区域 -->
				<div class="content">
					<h2 class="management-title">投入类别管理</h2>

					<div class="search-container">
						<input type="text" class="search-input" placeholder="输入类别名称" v-model="queryParam.name"
							@keyup.enter="query(1)">
						<button class="search-button leftmargin" @click="query(1)">查询</button>
						<button class="button bg-neutral-600" @click="resetQuery">重置</button>
					</div>

					<div class="button-spacing">
						<button class="button" @click="openAddDialog">添加投入类别</button>
					</div>

					<table>
						<thead>
							<tr>
								<th>序号</th>
								<th>类别名称</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in filteredRecords" :key="item.id">
								<td>{{index + 1}}</td>
								<td v-html="highlightText(item.name, queryParam.name)"></td>
								<td>
									<button class="button editButton" @click="openEditDialog(item.id)">编辑</button>
									<button class="button deleteButton"
										@click="openDeleteConfirmDialog(item.id)">删除</button>
								</td>
							</tr>
							<tr v-if="filteredRecords.length === 0">
								<td colspan="3" class="text-center py-4 text-neutral-500">没有找到匹配的记录</td>
							</tr>
						</tbody>
					</table>

					<!-- 分页组件 -->
					<div class="pagination" v-if="page.pages > 1">
						<button @click="query(1)">首页</button>
						<button v-for="index in page.pages" @click="query(index)">{{index}}</button>
						<button @click="query(page.pages)">末页</button>
					</div>
				</div>
			</div>

			<!-- 添加数据的对话框 -->
			<dialog ref="addDialogRef">
				<h2 class="management-title-dialog">添加投入类别</h2>
				<form>
					<label>类别名称：</label>
					<input type="text" placeholder="输入类别名称" v-model="addParam.name">
					<span class="errmsg" v-show="errShow.name">请输入类别名称</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="add">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeAddDialog">取消</button>
					</div>
					<span class="errmsg" v-show="errShow.addError">添加失败,请重新输入或者联系管理员</span>
				</form>
			</dialog>

			<!-- 编辑数据的对话框 -->
			<dialog ref="editDialogRef">
				<h2 class="management-title-dialog">编辑投入类别</h2>
				<form>
					<label>类别名称：</label>
					<input type="text" placeholder="输入类别名称" v-model="updateParam.name">
					<span class="errmsg" v-show="errShow.name">请输入类别名称</span>

					<div class="flex justify-end space-x-2">
						<button class="button" type="button" @click="update">保存</button>
						<button class="button bg-neutral-600" type="button" @click="closeEditDialog">取消</button>
					</div>
					<span class="errmsg" v-show="errShow.updateError">更新失败,请重新输入或者联系管理员</span>
				</form>
			</dialog>

			<!-- 删除确认对话框 -->
			<dialog ref="confirmDialogRef">
				<p>您确定删除该投入类别吗？</p>
				<div class="flex justify-end space-x-2">
					<button class="button" @click="confirmDelete">确定</button>
					<button class="button bg-neutral-600" @click="closeDeleteConfirmDialog">取消</button>
				</div>
			</dialog>
		</div>

		<script>
			const {
				createApp,
				ref,
				reactive,
				onMounted,
				computed
			} = Vue;

			createApp({
				setup() {
					// 查询参数
					const queryParam = reactive({
						name: '',
						pageNum: 1,
						pageSize: 10
					});

					// 所有数据（模拟数据库）
					const allRecords = ref([{
							id: 1,
							name: '设施与设备'
						},
						{
							id: 2,
							name: '种子'
						},
						{
							id: 3,
							name: '肥料'
						},
						{
							id: 4,
							name: '工具'
						},
						{
							id: 5,
							name: '药剂'
						},
						{
							id: 6,
							name: '人工'
						},
						{
							id: 7,
							name: '运输'
						},
						{
							id: 8,
							name: '灌溉系统'
						},
						{
							id: 9,
							name: '温控设备'
						},
						{
							id: 10,
							name: '照明设备'
						},
					]);

					// 分页结果
					const page = reactive({
						records: [],
						total: 0,
						pages: 1,
						pageNum: 1,
						pageSize: 10
					});

					// 高亮显示匹配文本
					const highlightText = (text, keyword) => {
						if (!keyword || !text) return text;
						const regex = new RegExp(keyword, 'gi');
						return text.replace(regex, match => `<span class="highlight">${match}</span>`);
					};

					// 过滤记录（模糊查询）
					const filteredRecords = computed(() => {
						let records = [...allRecords.value];

						// 类别名称模糊查询
						if (queryParam.name) {
							const keyword = queryParam.name.toLowerCase();
							records = records.filter(item =>
								item.name.toLowerCase().includes(keyword)
							);
						}

						// 分页处理
						const start = (queryParam.pageNum - 1) * queryParam.pageSize;
						const end = start + queryParam.pageSize;

						// 更新分页信息
						page.total = records.length;
						page.pages = Math.ceil(page.total / queryParam.pageSize);

						return records.slice(start, end);
					});

					// 添加参数
					const addParam = reactive({
						name: ''
					});

					// 更新参数
					const updateParam = reactive({
						id: null,
						name: ''
					});

					// 错误提示
					const errShow = reactive({
						name: false,
						addError: false,
						updateError: false
					});

					// 对话框引用
					const addDialogRef = ref(null);
					const editDialogRef = ref(null);
					const confirmDialogRef = ref(null);

					// 当前操作的ID
					const currentId = ref(null);

					// 重置查询条件
					const resetQuery = () => {
						queryParam.name = '';
						queryParam.pageNum = 1;
						query(1);
					};

					// 查询数据
					const query = (pageNum) => {
						queryParam.pageNum = pageNum;
						// 这里不需要实际API调用，因为使用了computed属性自动过滤
					};

					// 生命周期钩子 - 页面加载完成后执行
					onMounted(() => {
						// 初始化加载数据
						query(1);
					});

					// 打开添加对话框
					const openAddDialog = () => {
						// 重置添加参数
						Object.assign(addParam, {
							name: ''
						});

						// 重置错误提示
						resetErrorShow();

						// 显示对话框
						addDialogRef.value.showModal();
					};

					// 关闭添加对话框
					const closeAddDialog = () => {
						addDialogRef.value.close();
					};

					// 添加投入类别
					const add = () => {
						// 表单验证
						if (!validateAddForm()) {
							return;
						}

						// 检查是否已存在相同名称的类别
						const exists = allRecords.value.some(item => item.name === addParam.name);
						if (exists) {
							errShow.name = true;
							alert('该类别名称已存在');
							return;
						}

						// 模拟API调用
						setTimeout(() => {
							// 生成新ID
							const newId = Math.max(...allRecords.value.map(item => item.id)) + 1;

							// 添加新记录
							allRecords.value.push({
								id: newId,
								name: addParam.name
							});

							// 重新查询
							query(1);
							closeAddDialog();
							alert('添加成功');
						}, 300);
					};

					// 打开编辑对话框
					const openEditDialog = (id) => {
						// 找到要编辑的数据
						const item = allRecords.value.find(item => item.id === id);

						if (item) {
							// 填充编辑表单
							Object.assign(updateParam, {
								id: item.id,
								name: item.name
							});

							// 重置错误提示
							resetErrorShow();

							// 显示对话框
							editDialogRef.value.showModal();
						}
					};

					// 关闭编辑对话框
					const closeEditDialog = () => {
						editDialogRef.value.close();
					};

					// 更新投入类别
					const update = () => {
						// 表单验证
						if (!validateUpdateForm()) {
							return;
						}

						// 检查是否已存在相同名称的类别（除了当前编辑的）
						const exists = allRecords.value.some(
							item => item.name === updateParam.name && item.id !== updateParam.id
						);
						if (exists) {
							errShow.name = true;
							alert('该类别名称已存在');
							return;
						}

						// 模拟API调用
						setTimeout(() => {
							// 找到要更新的记录索引
							const index = allRecords.value.findIndex(item => item.id === updateParam.id);

							if (index !== -1) {
								// 更新记录
								allRecords.value[index] = {
									...allRecords.value[index],
									name: updateParam.name
								};

								// 重新查询
								query(queryParam.pageNum);

								// 显示成功消息
								alert('投入类别已更新');

								// 关闭对话框
								closeEditDialog();
							} else {
								errShow.updateError = true;
							}
						}, 300);
					};

					// 打开删除确认对话框
					const openDeleteConfirmDialog = (id) => {
						currentId.value = id;
						confirmDialogRef.value.showModal();
					};

					// 关闭删除确认对话框
					const closeDeleteConfirmDialog = () => {
						confirmDialogRef.value.close();
					};

					// 确认删除
					const confirmDelete = () => {
						// 检查是否有关联数据
						const hasAssociatedData = false; // 这里应根据实际业务逻辑检查

						if (hasAssociatedData) {
							alert('该类别下存在关联数据，无法删除');
							closeDeleteConfirmDialog();
							return;
						}

						// 模拟API调用
						setTimeout(() => {
							// 删除记录
							allRecords.value = allRecords.value.filter(item => item.id !== currentId.value);

							// 重新查询
							query(queryParam.pageNum);

							closeDeleteConfirmDialog();
							alert('删除成功');
						}, 300);
					};

					// 验证添加表单
					const validateAddForm = () => {
						let isValid = true;

						resetErrorShow();

						if (!addParam.name) {
							errShow.name = true;
							isValid = false;
						}

						return isValid;
					};

					// 验证更新表单
					const validateUpdateForm = () => {
						let isValid = true;

						resetErrorShow();

						if (!updateParam.name) {
							errShow.name = true;
							isValid = false;
						}

						return isValid;
					};

					// 重置错误提示
					const resetErrorShow = () => {
						Object.assign(errShow, {
							name: false,
							addError: false,
							updateError: false
						});
					};

					return {
						queryParam,
						page,
						filteredRecords,
						addParam,
						updateParam,
						errShow,
						addDialogRef,
						editDialogRef,
						confirmDialogRef,
						highlightText,
						resetQuery,
						query,
						openAddDialog,
						closeAddDialog,
						add,
						openEditDialog,
						closeEditDialog,
						update,
						openDeleteConfirmDialog,
						closeDeleteConfirmDialog,
						confirmDelete
					};
				}
			}).mount('#app');
		</script>
	</body>
</html>